/*
GLOBAL COLORS
*/
// @import "./vuesax.scss";

$colors: (
    "pink": #e91e63,
    "purple": #dda3e7,
    "deep-purple": #673ab7,
    "indigo": #3f51b5,
    "blue": #2196f3,
    "light-blue": #03a9f4,
    "cyan": #04cbe5,
    "teal": #1db3a8,
    "green": #4caf50,
    "light-green": #90d73f,
    "lime": #cee029,
    "yellow": #ffe70f,
    "amber": #ffc107,
    "orange": #ff9800,
    "deep-orange": #ff6825,
    "red": #fa3317,
    "brown": #845848,
    "blue-grey": #6c8693,
    "grey": #848484,
    "danger":#ec1919,
  );

.w-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  position: relative;
  cursor: pointer;

  display: inline-flex;
  justify-content: center;
  align-items: center;
  margin: 5px;
  background: cyan;

  &--count {
    position: absolute;
    top: 1px;
    right: 1px;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    z-index: 100;
    &.badgeNumber {
      width: auto;
      height: auto;
      top: -3px;
      right: 0px;
      border-radius: 4px;
      padding-left: 3px;
      padding-right: 3px;
      font-size: 0.625em;
      color: rgb(255, 255, 255);
    }
  }
  &--text {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
  }
  &--con-img {
    position: absolute;
    width: 100%;
    height: 100%;
    overflow: hidden;
    border-radius: 50%;
    img {
      width: 100%;
    }
  }

  &.size--xs {
    height: round(1.25 * $base-font-size / 2) * 3;
    width: round(1.25 * $base-font-size / 2) * 3;
  }
  &.size--sm {
    height: round(1.55 * $base-font-size / 2) * 3;
    width: round(1.55 * $base-font-size / 2) * 3;
  }
  &.size--md {
    height: round(1.85 * $base-font-size / 2) * 3;
    width: round(1.95 * $base-font-size / 2) * 3;
  }
  &.size--lg {
    height: round(2.2 * $base-font-size / 2) * 3;
    width: round(2.2 * $base-font-size / 2) * 3;
  }
  &.size--xl {
    height: round(2.5 * $base-font-size / 2) * 3;
    width: round(2.5 * $base-font-size / 2) * 3;
  }

  &.size--xs {
    padding-left: $base-increment;
    padding-right: $base-increment;
  }
  &.size--xl {
    padding-left: 3 * $base-increment;
    padding-right: 3 * $base-increment;
  }
  &--icon.size--xs {
    width: round(1.25 * $base-font-size / 2) * 3;
    width: round(1.25 * $base-font-size / 2) * 3;
  }
  &--icon.size--sm {
    width: round(1.55 * $base-font-size / 2) * 3;
    width: round(1.55 * $base-font-size / 2) * 3;
  }
  &--icon.size--md {
    width: round(1.85 * $base-font-size / 2) * 3;
    width: round(1.85 * $base-font-size / 2) * 3;
  }
  &--icon.size--lg {
    width: round(2.2 * $base-font-size / 2) * 3;
    width: round(2.2 * $base-font-size / 2) * 3;
  }
  &--icon.size--xl {
    width: round(2.5 * $base-font-size / 2) * 3;
    width: round(2.5 * $base-font-size / 2) * 3;
  }

}


@each $colorx in $colors {
  .w-avatar-#{colorx} {
    background: $colorx;
  }
  .dot-count-#{colorx} {
    background: $colorx;
  }
  .w-avatar-text-#{colorx} {
    color: $colorx;
  }
  .w-avatar-icon-text-#{colorx} {
    color:$colorx;
  }
}